<template>
  <div class="backgroundWhite height100">
    <navs title="填写需求" fixed></navs>
    <div class="pt40">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            readonly
            v-model="form.name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入姓名' }]"
          />
          <van-field
            readonly
            type="tel"
            maxlength="11"
            v-model="form.phone"
            name="phone"
            label="联系方式"
            placeholder="请输入联系方式"
            :rules="[{ required: true, message: '请输入联系方式' }]"
          />
          <van-field
            v-model="form.unit_name"
            name="unit_name"
            label="单位名称"
            placeholder="请输入单位名称"
            :rules="[{ required: true, message: '请输入单位名称' }]"
            :readonly="is_info"
          />
          <van-field
            :readonly="is_info"
            v-model="form.need"
            name="need"
            label="需求描述"
            placeholder="请输入需求描述"
            rows="4"
            autosize
            type="textarea"
            maxlength="200"
            show-word-limit
            :rules="[{ required: true, message: '请输入需求描述' }]"
          />
        </van-cell-group>
        <div style="margin: 16px" v-if="!is_info">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
  <success :isShow="isSuccess">
    <p>您的专家点单已经提交成功，点单详情可在个人中心查看。</p>
  </success>
</template>

<script setup>
import success from '@/components/success.vue'
import { useRoute } from 'vue-router'
import { ref, reactive, getCurrentInstance } from 'vue'

const route = useRoute()
const form = reactive({
  name: '123',
  phone: '12345678909',
  unit_name: '',
  need: ''
})

const is_info = route.query.is_info //是否显示按钮
const id = route.params.id
const isSuccess = ref(false) //是否点单成功
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

onBeforeMount(() => {
  if (is_info) {
    //显示需求详情
  }
})

const onSubmit = (obj) => {
  _this.$api.expert.expertOrder(id, form).then((res) => {
    if (res.code == 0) {
      isSuccess.value = true
    }
  })
}
</script>

<style scoped lang="scss"></style>
